<template>
  <div class="card-table">
    <!-- <div style="float: right; z-index: 10">
      <el-button type="primary" icon="el-icon-edit" circle @click="Toedit()" />
    </div> -->
    <div style="margin-top: 40px; padding: 10px">
      <el-form
        ref="user"
        :model="user"
        label-width="200px"
        class="demo-ruleForm"
        label-position="left"
      >
        <el-form-item label="头像" style="font-weight: bold">
          <!-- <img
            :src="user.AvatarUrl"
            class="avatar"
            width="120px"
            height="120px"
            style="float: left"
          /> -->
            <el-upload
            class="avatar-uploader"
            :action="interfaceUrl"
            :show-file-list="false"
            name="file"
            :http-request="imgUpload">
                <img v-if="user.AvatarUrl !== ''" :src="user.AvatarUrl" height="100px" class="avatar">
                <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                <el-avatar v-else :size="100" :src="imgSrc"></el-avatar>
            </el-upload>
        </el-form-item>
        <el-form-item label="手机号" style="font-weight: bold">
          <span style="float: left; font-weight: normal">{{ user.phone }}</span>
        </el-form-item>
        <el-form-item label="账号" style="font-weight: bold">
          <span style="float: left; font-weight: normal">{{user.account}}</span>
        </el-form-item>
        <el-form-item label="密码" style="font-weight: bold">
          <el-button type="primary" style="float: left" @click="handleData()"
            >修改密码</el-button
          >
        </el-form-item>
        <el-form-item label="姓名" style="font-weight: bold">
          <span style="float: left; font-weight: normal">{{ user.name }}</span>
        </el-form-item>
        <el-form-item label="性别" style="font-weight: bold">
          <span style="float: left; font-weight: normal">{{ user.sex }}</span>
        </el-form-item>
        <el-form-item label="角色" style="font-weight: bold">
          <span style="float: left; font-weight: normal">{{ user.role }}</span>
        </el-form-item>
      </el-form>
    </div>
    <!-- <el-dialog
      :modal-append-to-body="false"
      center
      title="修改信息"
      :visible.sync="EditDialog"
      width="60%"
      style="opacity: 1"
    >
      <el-form :model="userForms" label-width="100px" label-position="left">
        <el-form-item label="用户头像" align="center">
          <el-upload
            :show-file-list="false"
            :on-success="updateAvatarUrl"
            class="avatar-uploader"
            action="http://192.168.43.66:8188/UploadAvatar"
          >
            <img
              v-if="userForms.AvatarUrl"
              :src="userForms.AvatarUrl"
              class="avatar"
              width="120px"
              height="120px"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="userForms.name"
            placeholder="请输入用户的真实姓名"
          />
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input
            v-model.number="userForms.phone"
            placeholder="请输入用户的手机"
          />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="userForms.sex" placeholder="请选择用户的性别">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFormData()"
            >立即修改</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog> -->
    <el-dialog
      title="修改密码"
      :visible.sync="ruleDialog"
      :modal-append-to-body="false"
      width="40%"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="原密码" prop="oldPass">
          <el-input
            type="oldPsw"
            v-model="ruleForm.oldPass"
            :show-password="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
          <el-input
            type="newPsw"
            v-model="ruleForm.newPass"
            :show-password="true"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">提交</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog class="dai" title="修改个人信息" :visible.sync="EditDialog" :modal-append-to-body="false">
        <el-form
          :model="user"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-dynamic">
            <el-form-item label="头像" prop="AvatarUrl">
              <el-upload
              class="avatar-uploader"
              :action="interfaceUrl"
              :show-file-list="true"
              name="file"
              :http-request="imgUpload"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
                  <img v-if="user.AvatarUrl" :src="user.AvatarUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="user.name"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input v-model="user.phone"></el-input>
            </el-form-item>
            <el-form-item class="sexclass" label="性别" prop="sex">
              <el-radio v-model="user.sex" label="男">男</el-radio>
              <el-radio v-model="user.sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="账号" prop="account">
              <el-input type="textarea" v-model="user.account"></el-input>
            </el-form-item>
            <el-form-item class="dialog-footer dfooter">
              <el-button type="primary" @click="submitEditForm()">提交</el-button>
              <el-button @click="cancelForm()">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { updatepsw } from '@/api/auth/personApi.js'
import { updatedAvater, updateUser } from '@/api/auth/userApi.js'
import imgUrl from '@/assets/Img/people.png'
// , getUser , updateUser
export default {
  name: '',
  components: {},
  props: {},
  data () {
    var validateoldPsw = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('原密码不能为空'))
      } else {
        if (this.ruleForm.checkoldPsw !== '') {
          this.$refs.ruleForm.validateField('checkoldPsw')
        }
        callback()
      }
    }
    var validatenewPsw = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('新密码不能为空'))
      } else {
        if (this.ruleForm.checknewPsw !== '') {
          this.$refs.ruleForm.validateField('checknewPsw')
        }
        callback()
      }
    }
    return {
      user: null,
      imgSrc: imgUrl,
      ruleDialog: false,
      interfaceUrl: 'http://101.42.233.226:8060/',
      EditDialog: false,
      ruleForm: {
        account: '',
        oldPass: '',
        newPass: ''
      },
      //   userForms: {},
      rules: {
        // 表单验证
        oldPass: [
          { required: true, validator: validateoldPsw, trigger: 'blur' }
        ],
        newPass: [
          { required: true, validator: validatenewPsw, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'getUserInfo'
    })
  },
  watch: {},
  created () {
    // this.renderAccount()
    this.user = this.userInfo
  },
  mounted () {},
  methods: {
    // 获取用户信息
    renderAccount () { // ...mapGetters(['getLoginState'])
      // this.user = {
      //   AvatarUrl: JSON.parse(sessionStorage.getItem('avatarUrl')),
      //   _id: 'asda1651',
      //   phone: '1545266648',
      //   account: 'admin',
      //   name: 'text1',
      //   sex: '男',
      //   role: '2'
      // }
      // console.log('this.user', this.user) // 等登录
    },
    // 修改密码
    handleData () {
      this.ruleDialog = true
      this.ruleForm = {}
      this.ruleForm.account = this.userInfo.account
    },
    // 上传图片
    // updateAvatarUrl (file) {
    //   if (file.code === 200) {
    //     this.userForms.AvatarUrl = file.data
    //     this.$message({
    //       message: '用户头像上传成功',
    //       type: 'success',
    //       center: true
    //     })
    //   } else {
    //     this.$message.error({
    //       message: '用户头像上传失败',
    //       center: true
    //     })
    //   }
    // },
    // 重置表单
    resetForm () {
      this.ruleForm = {}
    },
    imgUpload (file) {
      console.log('aaaaa', file)
      const formDatas = new FormData()
      formDatas.append('file', file.file)
      console.log('formData', formDatas)
      updatedAvater('avatar', formDatas).then(res => {
        console.log('上传成功', res)
        if (res.data.code === 200) {
          this.user.AvatarUrl = res.data.data // 显示
          this.$store.commit('SET_USERINFO', this.user)
          updateUser(this.user).then(res => {
            // console.log('res', res)
          })
        } else {
          this.$message('头像上传失败')
        }
      })
    },
    // 修改用户信息
    // Toedit () {
    //   this.EditDialog = true
    //   var key = this.user.name
    //   // this.key = this.user.name;
    //   const params = {
    //     page: this.page,
    //     per_page: this.per_page,
    //     key: key
    //   }
    //   this.key = this.user.name
    //   getUser(params).then((res) => {
    //     // console.log('res',res);
    //     this.userForms = res.data.data.results[0]
    //   })
    // },
    // 修改密码
    submitForm () {
      this.$confirm('此操作将修改密码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          console.log('修改密码', this.ruleForm)
          updatepsw(this.ruleForm).then((res) => {
            console.log(res)
            if (res.data.code === 200) {
              this.$message.success({ message: '修改成功', center: true })
              this.ruleDialog = false
            } else {
              this.$message.error({ message: res.data.message, center: true })
              this.ruleDialog = false
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
    // 编辑用户信息
    // submitFormData () {
    //   this.EditDialog = false
    //   updateUser(this.userForms._id, this.userForms).then((res) => {
    //     // console.log(this.userForms._id, this.userForms);
    //     if (res.data.code === 200) {
    //       this.$message.success({ message: '修改成功', center: true })
    //       this.user = this.userForms
    //     } else {
    //       this.$message.error({ message: '修改失败', center: true })
    //     }
    //   })
    // }
  }
}
</script>

<style scoped>
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}

</style>
